<!--
 * @Author: @zhangrui-1997 17805271997@163.com
 * @Date: 2023-08-10 16:02:30
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2023-12-28 09:57:37
 * @FilePath: \vue3-ts\src\views\bus\components\echarts\BarGraph.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="BarEcharts" class="BarEcharts" :style="style"></div>
</template>
  
  <script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  dataSource: {
    type: Object,
    default: false,
  },
});

// 定义值
let BarEcharts = ref(); //ref的应用
let style = reactive({
  width: "100%",
  height: "100%",
});

// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(BarEcharts.value);
  let brr: Array<T> = [];
  let arr = props.dataSource.data;
  var xData = (function () {
    var data = [];
    for (var i = 2018; i <= 2023; i++) {
      data.push(i + "年");
    }
    return data;
  })();
  // var color = obj.color || [];
  // var name = obj.name || [];
  // var data = obj.data || [];
  for (let i = 0; i < arr.length; i++) {
    let obj = {
      name: arr[i].name,
      type: "bar",
      data: arr[i].data,
      barWidth: 15,
      barGap: 1, //柱子之间间距 //柱图宽度      两种情况都要设置，设置series 中对应数据柱形的itemStyle属性下的emphasis和normal的barBorderRadius属性初始化时候圆角  鼠标移上去圆角
      // itemStyle: {
      //   normal: {
      //     barBorderRadius: 50,
      //     // color: "#446ACF",
      //   },
      // },
    };
    brr.push(obj);
  }
  let option = {
    color: ["#00acee", "#52cdd5", "#52b6d5", "#79d9f1", "#a7e7ff", "#c8efff"],
    grid: {
      left: "3%",
      top: "5%",
      right: "6%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        color: "#fff", //设置文字颜色
      },
      backgroundColor: "#061436", // 背景
      padding: [8, 10], //内边距
      extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
    },

    xAxis: {
      type: "category",
      data: xData,
      axisLine: {
        //---坐标轴 轴线
        show: true, //---是否显示
        lineStyle: {
          color: "#32346c",
        },
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      axisLabel: {
        //X轴文字
        textStyle: {
          color: "#bac0c0",
          fontWeight: "normal",
          fontSize: 12,
        },
      },
    },

    yAxis: {
      type: "value",
      splitLine: {
        //分割线
        show: true,
        lineStyle: {
          color: "#32346c",
          type: "dased",
        },
      },

      axisLabel: {
        //Y轴刻度值
        formatter: "{value}",
        textStyle: {
          fontSize: 12,
          color: "#bac0c0",
        },
      },
      axisLine: {
        //---坐标轴 轴线
        show: false, //---是否显示
      },
    },

    series: brr,
  };
  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.dataSource,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>
  
  <style lang="less" scoped></style>
  